{% extends "base.html" %}

{% block title %}系统设置 - 校园生活助手{% endblock %}

{% block css %}
<style>
    .settings-container {
        max-width: 800px;
        margin: 0 auto;
    }
    .section {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 2rem;
        margin-bottom: 2rem;
    }
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e9ecef;
    }
    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #495057;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .form-group {
        margin-bottom: 1.5rem;
    }
    .form-label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: #495057;
    }
    .form-control {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        font-size: 1rem;
        line-height: 1.5;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    .form-control:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    .form-check {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1rem;
        padding: 0.75rem;
        border-radius: 0.25rem;
        transition: background-color 0.2s;
    }
    .form-check:hover {
        background-color: #f8f9fa;
    }
    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
        margin-top: 0;
    }
    .form-check-label {
        margin-bottom: 0;
        font-weight: 400;
        color: #495057;
    }
    .btn {
        display: inline-block;
        padding: 0.5rem 1rem;
        border: 1px solid transparent;
        border-radius: 0.25rem;
        font-size: 1rem;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
    }
    .btn-primary {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }
    .btn-primary:hover {
        background-color: #0056b3;
        border-color: #004085;
    }
    .btn-secondary {
        background-color: #6c757d;
        color: white;
        border-color: #6c757d;
    }
    .btn-secondary:hover {
        background-color: #5a6268;
        border-color: #545b62;
    }
    .btn-success {
        background-color: #28a745;
        color: white;
        border-color: #28a745;
    }
    .btn-success:hover {
        background-color: #1e7e34;
        border-color: #1c7430;
    }
    .btn-danger {
        background-color: #dc3545;
        color: white;
        border-color: #dc3545;
    }
    .btn-danger:hover {
        background-color: #c82333;
        border-color: #bd2130;
    }
    .btn-outline-primary {
        color: #007bff;
        border-color: #007bff;
        background-color: white;
    }
    .btn-outline-primary:hover {
        background-color: #007bff;
        color: white;
    }
    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid #e9ecef;
    }
    .tab-container {
        border-bottom: 1px solid #dee2e6;
        margin-bottom: 2rem;
    }
    .tabs {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .tab {
        margin-bottom: -1px;
    }
    .tab-link {
        display: block;
        padding: 1rem 1.5rem;
        text-decoration: none;
        color: #6c757d;
        border: 1px solid transparent;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
        transition: all 0.2s;
    }
    .tab-link:hover {
        background-color: #f8f9fa;
        border-color: #e9ecef;
        color: #495057;
    }
    .tab-link.active {
        background-color: white;
        border-color: #dee2e6 #dee2e6 white;
        color: #495057;
        font-weight: 600;
    }
    .tab-content {
        margin-bottom: 2rem;
    }
    .tab-pane {
        display: none;
    }
    .tab-pane.active {
        display: block;
    }
    .card {
        background-color: #f8f9fa;
        border-radius: 0.5rem;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        border-left: 4px solid #007bff;
    }
    .card-title {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
    }
    .card-text {
        color: #6c757d;
        margin-bottom: 0;
    }
    .alert {
        padding: 1rem;
        border-radius: 0.25rem;
        margin-bottom: 1.5rem;
    }
    .alert-success {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    .alert-danger {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    .alert-warning {
        background-color: #fff3cd;
        color: #856404;
        border: 1px solid #ffeaa7;
    }
    .alert-info {
        background-color: #d1ecf1;
        color: #0c5460;
        border: 1px solid #bee5eb;
    }
    /* 响应式设计 */
    @media (max-width: 768px) {
        .settings-container {
            padding: 0 1rem;
        }
        .section {
            padding: 1.5rem 1rem;
        }
        .section-header {
            flex-direction: column;
            gap: 1rem;
            align-items: stretch;
        }
        .form-actions {
            flex-direction: column;
        }
        .tabs {
            overflow-x: auto;
        }
        .tab-link {
            white-space: nowrap;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-800">
        <i class="fa fa-cog mr-2 text-primary"></i>系统设置
    </h1>
    <p class="text-gray-600">管理您的账户和系统偏好设置</p>
</div>

<!-- 消息提示区域 -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ category }} fade-in mb-4" role="alert">
                <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
{% endwith %}

<div class="settings-container">
    <!-- 标签页导航 -->
    <div class="tab-container">
        <ul class="tabs">
            <li class="tab"><a href="#account-settings" class="tab-link active" data-toggle="tab">账户设置</a></li>
            <li class="tab"><a href="#notification-settings" class="tab-link" data-toggle="tab">通知设置</a></li>
            <li class="tab"><a href="#privacy-settings" class="tab-link" data-toggle="tab">隐私设置</a></li>
            <li class="tab"><a href="#security-settings" class="tab-link" data-toggle="tab">安全设置</a></li>
            <li class="tab"><a href="#appearance-settings" class="tab-link" data-toggle="tab">外观设置</a></li>
        </ul>
    </div>
    
    <!-- 标签页内容 -->
    <div class="tab-content">
        <!-- 账户设置标签页 -->
        <div id="account-settings" class="tab-pane active">
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-user-circle text-primary"></i>
                        基本信息
                    </h2>
                </div>
                <form id="basic-info-form">
                    <div class="form-group">
                        <label for="username" class="form-label">用户名</label>
                        <input type="text" id="username" class="form-control" value="zhangming" disabled>
                    </div>
                    <div class="form-group">
                        <label for="fullname" class="form-label">姓名</label>
                        <input type="text" id="fullname" class="form-control" value="张明">
                    </div>
                    <div class="form-group">
                        <label for="email" class="form-label">电子邮箱</label>
                        <input type="email" id="email" class="form-control" value="zhangming@example.com">
                    </div>
                    <div class="form-group">
                        <label for="phone" class="form-label">手机号码</label>
                        <input type="tel" id="phone" class="form-control" value="138****1234">
                    </div>
                    <div class="form-group">
                        <label for="student-id" class="form-label">学号</label>
                        <input type="text" id="student-id" class="form-control" value="2021030101" disabled>
                    </div>
                    <div class="form-group">
                        <label for="department" class="form-label">学院/系</label>
                        <input type="text" id="department" class="form-control" value="计算机科学与技术学院" disabled>
                    </div>
                    <div class="form-group">
                        <label for="major" class="form-label">专业</label>
                        <input type="text" id="major" class="form-control" value="计算机科学与技术" disabled>
                    </div>
                    <div class="form-actions">
                        <button type="button" id="cancel-basic-info-btn" class="btn btn-secondary">取消</button>
                        <button type="submit" id="save-basic-info-btn" class="btn btn-primary">保存更改</button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 通知设置标签页 -->
        <div id="notification-settings" class="tab-pane">
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-bell text-primary"></i>
                        通知偏好设置
                    </h2>
                </div>
                <form id="notification-settings-form">
                    <div class="card">
                        <div class="card-title">通知类型</div>
                        <div class="card-text">选择您希望接收的通知类型</div>
                    </div>
                    
                    <div class="form-check">
                        <input type="checkbox" id="course-notifications" class="form-check-input" checked>
                        <label for="course-notifications" class="form-check-label">课程通知（作业截止、考试安排等）</label>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" id="activity-notifications" class="form-check-input" checked>
                        <label for="activity-notifications" class="form-check-label">活动通知（校园活动、社团活动等）</label>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" id="resource-notifications" class="form-check-input" checked>
                        <label for="resource-notifications" class="form-check-label">资源通知（学习资源更新、推荐等）</label>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" id="message-notifications" class="form-check-input" checked>
                        <label for="message-notifications" class="form-check-label">消息通知（私信、讨论区回复等）</label>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" id="system-notifications" class="form-check-input" checked>
                        <label for="system-notifications" class="form-check-label">系统通知（系统更新、维护公告等）</label>
                    </div>
                    
                    <div class="card mt-4">
                        <div class="card-title">通知方式</div>
                        <div class="card-text">选择您希望接收通知的方式</div>
                    </div>
                    
                    <div class="form-check">
                        <input type="checkbox" id="in-app-notifications" class="form-check-input" checked>
                        <label for="in-app-notifications" class="form-check-label">应用内通知</label>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" id="email-notifications" class="form-check-input" checked>
                        <label for="email-notifications" class="form-check-label">电子邮件通知</label>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" id="sms-notifications" class="form-check-input">
                        <label for="sms-notifications" class="form-check-label">短信通知（重要通知）</label>
                    </div>
                    
                    <div class="card mt-4">
                        <div class="card-title">通知时间</div>
                        <div class="card-text">设置您希望接收日常通知的时间</div>
                    </div>
                    
                    <div class="form-group">
                        <label for="notification-time" class="form-label">日常通知时间</label>
                        <input type="time" id="notification-time" class="form-control" value="09:00">
                    </div>
                    
                    <div class="form-actions">
                        <button type="button" id="cancel-notification-settings-btn" class="btn btn-secondary">取消</button>
                        <button type="submit" id="save-notification-settings-btn" class="btn btn-primary">保存更改</button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 隐私设置标签页 -->
        <div id="privacy-settings" class="tab-pane">
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-lock text-primary"></i>
                        隐私设置
                    </h2>
                </div>
                <form id="privacy-settings-form">
                    <div class="card">
                        <div class="card-title">个人信息可见性</div>
                        <div class="card-text">设置哪些信息对其他用户可见</div>
                    </div>
                    
                    <div class="form-check">
                        <input type="checkbox" id="show-name" class="form-check-input" checked>
                        <label for="show-name" class="form-check-label">显示真实姓名</label>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" id="show-email" class="form-check-input">
                        <label for="show-email" class="form-check-label">显示电子邮箱</label>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" id="show-phone" class="form-check-input">
                        <label for="show-phone" class="form-check-label">显示手机号码</label>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" id="show-department" class="form-check-input" checked>
                        <label for="show-department" class="form-check-label">显示学院/系和专业</label>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" id="show-scores" class="form-check-input">
                        <label for="show-scores" class="form-check-label">显示成绩信息</label>
                    </div>
                    
                    <div class="card mt-4">
                        <div class="card-title">数据分享</div>
                        <div class="card-text">选择是否允许系统使用您的数据</div>
                    </div>
                    
                    <div class="form-check">
                        <input type="checkbox" id="allow-data-analysis" class="form-check-input" checked>
                        <label for="allow-data-analysis" class="form-check-label">允许用于数据分析（匿名化处理）</label>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" id="allow-personalized-recommendations" class="form-check-input" checked>
                        <label for="allow-personalized-recommendations" class="form-check-label">允许个性化推荐</label>
                    </div>
                    
                    <div class="form-actions">
                        <button type="button" id="cancel-privacy-settings-btn" class="btn btn-secondary">取消</button>
                        <button type="submit" id="save-privacy-settings-btn" class="btn btn-primary">保存更改</button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 安全设置标签页 -->
        <div id="security-settings" class="tab-pane">
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-shield text-primary"></i>
                        密码设置
                    </h2>
                </div>
                <form id="password-form">
                    <div class="form-group">
                        <label for="current-password" class="form-label">当前密码</label>
                        <input type="password" id="current-password" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="new-password" class="form-label">新密码</label>
                        <input type="password" id="new-password" class="form-control">
                        <small class="text-muted">密码长度至少8位，包含字母、数字和特殊字符</small>
                    </div>
                    <div class="form-group">
                        <label for="confirm-password" class="form-label">确认新密码</label>
                        <input type="password" id="confirm-password" class="form-control">
                    </div>
                    <div class="form-actions">
                        <button type="button" id="cancel-password-btn" class="btn btn-secondary">取消</button>
                        <button type="submit" id="change-password-btn" class="btn btn-primary">修改密码</button>
                    </div>
                </form>
            </div>
            
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-mobile text-primary"></i>
                        二步验证
                    </h2>
                </div>
                <div class="form-check">
                    <input type="checkbox" id="two-factor-auth" class="form-check-input">
                    <label for="two-factor-auth" class="form-check-label">启用二步验证</label>
                </div>
                <div class="form-actions">
                    <button type="button" id="setup-two-factor-btn" class="btn btn-outline-primary">设置二步验证</button>
                </div>
            </div>
            
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-history text-primary"></i>
                        登录历史
                    </h2>
                </div>
                <table class="info-table">
                    <thead>
                        <tr>
                            <th>登录时间</th>
                            <th>登录设备</th>
                            <th>登录地点</th>
                            <th>IP地址</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>2024-05-20 14:30</td>
                            <td>Chrome / Windows</td>
                            <td>北京市</td>
                            <td>114.247.50.xx</td>
                        </tr>
                        <tr>
                            <td>2024-05-18 09:15</td>
                            <td>Safari / iOS</td>
                            <td>北京市</td>
                            <td>114.247.50.xx</td>
                        </tr>
                        <tr>
                            <td>2024-05-15 16:45</td>
                            <td>Firefox / macOS</td>
                            <td>北京市</td>
                            <td>114.247.50.xx</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 外观设置标签页 -->
        <div id="appearance-settings" class="tab-pane">
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-paint-brush text-primary"></i>
                        主题设置
                    </h2>
                </div>
                <form id="appearance-settings-form">
                    <div class="form-group">
                        <label class="form-label">主题模式</label>
                        <div class="form-check">
                            <input type="radio" name="theme" id="theme-light" class="form-check-input" checked>
                            <label for="theme-light" class="form-check-label">浅色模式</label>
                        </div>
                        <div class="form-check">
                            <input type="radio" name="theme" id="theme-dark" class="form-check-input">
                            <label for="theme-dark" class="form-check-label">深色模式</label>
                        </div>
                        <div class="form-check">
                            <input type="radio" name="theme" id="theme-auto" class="form-check-input">
                            <label for="theme-auto" class="form-check-label">跟随系统</label>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">界面语言</label>
                        <select id="language" class="form-control">
                            <option value="zh-CN" selected>简体中文</option>
                            <option value="en-US">English (US)</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">默认首页</label>
                        <select id="default-home" class="form-control">
                            <option value="dashboard" selected>仪表盘</option>
                            <option value="courses">课程表</option>
                            <option value="activities">校园活动</option>
                            <option value="resources">学习资源</option>
                            <option value="forum">讨论区</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">时区设置</label>
                        <select id="timezone" class="form-control">
                            <option value="Asia/Shanghai" selected>中国标准时间 (UTC+8)</option>
                        </select>
                    </div>
                    
                    <div class="form-actions">
                        <button type="button" id="cancel-appearance-settings-btn" class="btn btn-secondary">取消</button>
                        <button type="submit" id="save-appearance-settings-btn" class="btn btn-primary">保存更改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    // 获取DOM元素
    const tabLinks = document.querySelectorAll('.tab-link');
    const tabPanes = document.querySelectorAll('.tab-pane');
    const basicInfoForm = document.getElementById('basic-info-form');
    const notificationSettingsForm = document.getElementById('notification-settings-form');
    const privacySettingsForm = document.getElementById('privacy-settings-form');
    const passwordForm = document.getElementById('password-form');
    const appearanceSettingsForm = document.getElementById('appearance-settings-form');
    const setupTwoFactorBtn = document.getElementById('setup-two-factor-btn');
    
    // 标签页切换功能
    tabLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            // 移除所有标签页的活动状态
            tabLinks.forEach(l => l.classList.remove('active'));
            tabPanes.forEach(p => p.classList.remove('active'));
            
            // 为当前点击的标签页添加活动状态
            this.classList.add('active');
            
            // 显示对应的标签页内容
            const targetId = this.getAttribute('href').substring(1);
            const targetPane = document.getElementById(targetId);
            if (targetPane) {
                targetPane.classList.add('active');
            }
            
            // 添加切换动画效果
            tabPanes.forEach(pane => {
                if (pane.classList.contains('active')) {
                    pane.style.opacity = '0';
                    pane.style.transform = 'translateY(10px)';
                    pane.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                    
                    setTimeout(() => {
                        pane.style.opacity = '1';
                        pane.style.transform = 'translateY(0)';
                    }, 50);
                }
            });
        });
    });
    
    // 基本信息表单提交事件
    basicInfoForm.addEventListener('submit', function(e) {
        e.preventDefault();
        // 在实际应用中，这里应该提交表单数据到服务器
        alert('基本信息已保存');
    });
    
    // 通知设置表单提交事件
    notificationSettingsForm.addEventListener('submit', function(e) {
        e.preventDefault();
        // 在实际应用中，这里应该提交表单数据到服务器
        alert('通知设置已保存');
    });
    
    // 隐私设置表单提交事件
    privacySettingsForm.addEventListener('submit', function(e) {
        e.preventDefault();
        // 在实际应用中，这里应该提交表单数据到服务器
        alert('隐私设置已保存');
    });
    
    // 密码设置表单提交事件
    passwordForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const currentPassword = document.getElementById('current-password').value;
        const newPassword = document.getElementById('new-password').value;
        const confirmPassword = document.getElementById('confirm-password').value;
        
        // 简单的表单验证
        if (!currentPassword) {
            alert('请输入当前密码');
            return;
        }
        if (!newPassword) {
            alert('请输入新密码');
            return;
        }
        if (newPassword.length < 8) {
            alert('新密码长度至少为8位');
            return;
        }
        if (newPassword !== confirmPassword) {
            alert('两次输入的新密码不一致');
            return;
        }
        
        // 在实际应用中，这里应该提交表单数据到服务器
        alert('密码已修改');
        // 重置表单
        passwordForm.reset();
    });
    
    // 外观设置表单提交事件
    appearanceSettingsForm.addEventListener('submit', function(e) {
        e.preventDefault();
        // 在实际应用中，这里应该提交表单数据到服务器
        alert('外观设置已保存');
    });
    
    // 设置二步验证按钮点击事件
    setupTwoFactorBtn.addEventListener('click', function() {
        // 在实际应用中，这里应该跳转到二步验证设置页面或弹出设置模态框
        alert('二步验证设置功能将在后续版本中实现');
    });
    
    // 主题切换事件
    const themeRadios = document.querySelectorAll('input[name="theme"]');
    themeRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.id === 'theme-dark') {
                document.body.classList.add('dark-theme');
            } else {
                document.body.classList.remove('dark-theme');
            }
        });
    });
    
    // 页面载入动画
    document.addEventListener('DOMContentLoaded', function() {
        // 为每个部分添加淡入动画
        const sections = document.querySelectorAll('.section');
        sections.forEach((section, index) => {
            section.style.opacity = '0';
            section.style.transform = 'translateY(20px)';
            section.style.transition = `opacity 0.5s ease ${300 + index * 100}ms, transform 0.5s ease ${300 + index * 100}ms`;
            
            setTimeout(() => {
                section.style.opacity = '1';
                section.style.transform = 'translateY(0)';
            }, 300 + index * 100);
        });
        
        // 为表单元素添加动画
        const formElements = document.querySelectorAll('.form-control, .form-check');
        formElements.forEach((element, index) => {
            element.style.opacity = '0';
            element.style.transform = 'translateY(10px)';
            element.style.transition = `opacity 0.3s ease ${800 + index * 50}ms, transform 0.3s ease ${800 + index * 50}ms`;
            
            setTimeout(() => {
                element.style.opacity = '1';
                element.style.transform = 'translateY(0)';
            }, 800 + index * 50);
        });
    });
</script>
{% endblock %}